import config from '../config'
import position from '../service/position'
export default abstract class CanvasAbstract {
  public models: IModel[] = []
  abstract rander(): void
  abstract num(): number
  abstract model(): ModelConstruct | BulletConstruct

  constructor(
    protected name: string,
    protected app = document.querySelector('#app') as HTMLDivElement,
    protected el = document.createElement('canvas'),
    public ctx = el.getContext('2d')!
  ) {
    this.createCanvas()
  }

  protected createCanvas() {
    this.el.width = config.canvas.width
    this.el.height = config.canvas.height
    this.el.setAttribute('name', this.name)
    this.app.appendChild(this.el)
    // this.app.insertAdjacentElement('afterbegin', this.el)
  }

  protected createModels(): void {
    position.getCollection(this.num()).forEach(position => {
      const model = this.model() as ModelConstruct
      const instance = new model(position.x, position.y)
      this.models.push(instance)
    })
  }

  public renderModel() {
    this.ctx.clearRect(0, 0, config.canvas.width, config.canvas.height)
    this.models.forEach(model => {
      model.render()
    })
    // this.models.forEach(model => {
    //   this.canvas.drawImage(model.image(), model.x, model.y, config.model.width, config.model.height)
    // })
  }

  public removeModel(model: IModel) {
    this.models = this.models.filter(m => m != model)
  }
}
